<template>
  <div class="detail">
    <el-card>
      <el-tabs>
        <el-tab-pane label="登录账户设置">
          <el-form ref="form" label-width="200px" :model="form" :rules="rules">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="form.username" style="width: 400px" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="form.password"
                type="password"
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">更新</el-button>
              <el-button @click="back">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" lazy>
          <!-- 动态组件 -->
          <component
            :is="'Info'"
            :user-info="otherUserInfo"
            @updateUserInfo="updateUserInfo"
          />
        </el-tab-pane>
        <el-tab-pane label="岗位详情" lazy>
          <!-- 动态组件 -->
          <component :is="'Job'" />
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
import { sysUser } from '@/api/user'
import { sysUserPut } from '@/api/employees'
export default {
  name: '',
  // 异步组件
  components: {
    Info: () => import('./components/info.vue'),
    Job: () => import('./components/job.vue')
  },
  data() {
    return {
      // 接收由路由传递的参数
      id: this.$route.params.id,
      // 接收原始数据
      userInfo: '',
      otherUserInfo: {},
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '必填', trigger: 'change' }],
        password: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    // 调用接口
    async getData() {
      const res = await sysUser(this.id)
      // 为了密码不受影响,重新定义以单独的form对象(原始返回的数据中密码为加密的)
      this.form.username = res.data.username
      // 父组件的用户信息与子组件不能形成关联,否则不同页面的修改数据会互相影响
      this.otherUserInfo = JSON.parse(JSON.stringify(res.data))
      this.userInfo = res.data
    },
    // 点击取消 回到员工页面
    back() {
      // 方式一:利用go(-1) 回到上一个页面 (但是如果是直接用链接跳转的,回到上一页可能会出现网站直接没有)
      // this.$router.go(-1)
      this.$router.push('/employees')
    },
    // 点击更新后,预校验表单 调用接口修改信息,提示用户 表单内容重置
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // 双向的数据绑定再form上 合并对象
          await sysUserPut({ ...this.userInfo, ...this.form })
          // 父组件的值发生更新后,子组件渲染页面的数据也需要修改
          this.otherUserInfo.username = this.form.username
          this.$message.success('修改成功')
        }
      })
    },
    // 子组件修改后,触发父组件修改用户信息
    updateUserInfo(info) {
      this.form.username = info.username
      // 深拷贝 使父与子的修改互不影响
      this.userInfo = JSON.parse(JSON.stringify(info))
    }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  padding: 20px;
}
</style>
